<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>{:C('sitename')}</title>
		<meta name="format-detection" content="telephone=no,email=no"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<!-- <link href="__PUBLIC__/Admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="__PUBLIC__/Admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

		<link href="__PUBLIC__/Admin/css/animate.min.css" rel="stylesheet">
		<link href="__PUBLIC__/Admin/css/style.min862f.css?v=4.1.0" rel="stylesheet"> -->
		<script>
			;
			(function (win, lib) {
				var doc = win.document;
				var docEl = doc.documentElement;
				var metaEl = doc.querySelector('meta[name="viewport"]');
				var flexibleEl = doc.querySelector('meta[name="flexible"]');
				var dpr = 0;
				var scale = 0;
				var tid;
				var flexible = lib.flexible || (lib.flexible = {});
	
				if (metaEl) {
					// console.warn('将根据已有的meta标签来设置缩放比例');
					var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
					if (match) {
						scale = parseFloat(match[1]);
						dpr = parseInt(1 / scale);
					}
				} else if (flexibleEl) {
					var content = flexibleEl.getAttribute('content');
					if (content) {
						var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
						var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
						if (initialDpr) {
							dpr = parseFloat(initialDpr[1]);
							scale = parseFloat((1 / dpr).toFixed(2));
						}
						if (maximumDpr) {
							dpr = parseFloat(maximumDpr[1]);
							scale = parseFloat((1 / dpr).toFixed(2));
						}
					}
				}
				if (!dpr && !scale) {
					var isAndroid = win.navigator.appVersion.match(/android/gi);
					var isIPhone = win.navigator.appVersion.match(/iphone/gi);
					var devicePixelRatio = win.devicePixelRatio;
					if (isIPhone) {
						// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
						if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
							dpr = 3;
						} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
							dpr = 2;
						} else {
							dpr = 1;
						}
					} else {
						// 其他设备下，仍旧使用1倍的方案
						dpr = 1;
					}
					scale = 1 / dpr;
				}
				docEl.setAttribute('data-dpr', dpr);
				if (!metaEl) {
					metaEl = doc.createElement('meta');
					metaEl.setAttribute('name', 'viewport');
					metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale +
						', minimum-scale=' + scale + ', user-scalable=no');
					if (docEl.firstElementChild) {
						docEl.firstElementChild.appendChild(metaEl);
					} else {
						var wrap = doc.createElement('div');
						wrap.appendChild(metaEl);
						doc.write(wrap.innerHTML);
					}
				}
	
				function refreshRem() {
					var width = docEl.getBoundingClientRect().width;
					if (width / dpr > 750) {
						width = 750 * dpr;
					}
					var rem = width / 10;
					docEl.style.fontSize = rem + 'px';
					flexible.rem = win.rem = rem;
				}
				win.addEventListener('resize', function () {
					clearTimeout(tid);
					tid = setTimeout(refreshRem, 100);
				}, false);
				win.addEventListener('pageshow', function (e) {
					if (e.persisted) {
						clearTimeout(tid);
						tid = setTimeout(refreshRem, 100);
					}
				}, false);
				if (doc.readyState === 'complete') {
					doc.body.style.fontSize = 12 * dpr + 'px';
				} else {
					doc.addEventListener('DOMContentLoaded', function (e) {
						doc.body.style.fontSize = 12 * dpr + 'px';
					}, false);
				}
	
				refreshRem();
				flexible.dpr = win.dpr = dpr;
				flexible.refreshRem = refreshRem;
				flexible.rem2px = function (d) {
					var val = parseFloat(d) * this.rem;
					if (typeof d === 'string' && d.match(/rem$/)) {
						val += 'px';
					}
					return val;
				}
				flexible.px2rem = function (d) {
					var val = parseFloat(d) / this.rem;
					if (typeof d === 'string' && d.match(/px$/)) {
						val += 'rem';
					}
					return val;
				}
			})(window, window['lib'] || (window['lib'] = {}));
		</script>
	<style>
        html,body,h1,p{
          margin: 0;
          padding: 0;
          border: none;
      }
      html{
       height: 100%;
       position: relative;
     }
    .title{
          position: relative;
          top: 4.4rem;
    }
      h1{
          font-size: 0.586rem;
          color: #ffec74;
      }
      .line{
          width: 3.333rem;
          display: block;
          height: 0.063rem;
          margin: 0.3rem auto;
          background-color: #858255;
          border-radius: 70px;
      }
      .title>p{
          font-size: 0.293rem;
          color: #ffec74;
          letter-spacing: 1px;
      }
      .login{
          position: absolute;
		  width: 100vw;
          top: 3.2rem;
		  left:100vw;
		  display: none;
      }
     .form-group{
		width: 82%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e7e7e7;
      }
	  .form-group>span{
		  color:#000;
		  font-size: 0.44rem;
		  font-weight: 500;
	  }
	  input[type="text"]:focus,input[type="password"]:focus{
		  border: none;
		  outline: none;
	  }
       input[type="text"],input[type="password"]{
           flex: 1;
           height: 1.2rem;
           display: block;
		   border: none;
           padding-left: 0.5rem;
           font-size: 0.48rem;
		   box-sizing: border-box;
           color: #000;
		   letter-spacing: 2px;
		   background: transparent;
       }
       input::-webkit-input-placeholder{
			color: #d3d2d2;
			font-size: 0.48rem;
       }
		input::-moz-placeholder{  
			color: #d3d2d2;   
			font-size: 0.48rem;    
		}
		input::-ms-input-placeholder{ 
			color: #d3d2d2;
			font-size: 0.48rem;    
		}
       .yzm{
           position: absolute;
           right: 0;
           font-size: 0.36rem;
           color: #fff98d;
           top: 0.4rem;
           right: 1rem;
       }
       /* .phone{
        left: 1rem;
        top: 0.28rem;
       } */
       .password{
        left: 1rem;
        top: 0.3rem;
       }
       #btn{
			width: 82%;
			height: 1.2rem; 
			margin: 1rem auto;
			background: #08c261; /* 标准的语法（必须放在最后） */
			border: none !important;
			border-radius: 5px;
			display: block;
			color: #fff;
			font-size: 0.43rem;
       }
       .loding img{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
       }
	   #header-icon{
		   position: relative;
		   left: 0;
		   top: 0;
	   }
       .icon img{
		width: 5.33rem;
		display: block;
		margin: 0 auto;
	}
	.success{
		width: 3.2rem;
		height: 3.2rem;
		background-color: #e2e2df;
		opacity: 0.9;
		margin: 0 auto;
		text-align: center;
		position: absolute;
		top: 36%;
		left: 50%;
		margin-left: -1.6rem;
		border-radius: 8px;
		display: none;
		z-index: 1111;
	 }
	 .success p{
		font-size: 0.5rem;
		margin-top: 0.4rem;
		color: #655e32;
	 }
	 .right{
		width: 1.8rem;
		height: 1.296rem;
		margin-top: 0.4rem;
	 }
	</style>
	<style>
	.checkbox{
		color: hsl(209, 18%, 46%);
		width: 100%;
		padding: 18px 9% 32px 9%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		font-size: 0.42rem;
	}
	.checkboxs{
		color: hsl(209, 18%, 46%);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.42rem;
	}
	#savePwd{
		display: inline-block;
		width: 24px;
		height: 24px;
		border-radius: 4px;
		background-color: transparent;
		position: relative;
		border: none;
		margin-right: 10px;
	}
	#savePwd::before{
		content:'';
		display: inline-block;
		width: 25px;
		height: 25px;
		position: relative;
		left: -1px;
		top: -1px;
		border-radius: 4px;
		background-color: #fff;
		border: 1px solid #efefef;
	}
	#savePwd:checked:after {
		content:"L";
		display: inline-block;
		position: absolute;
		top: -4px;
		left: -5px;
		width: 24px;
		height: 24px;
		color: #299604;
		border-radius: 4px;
		font-weight: 450;
		font-size:18px;
		font-family:Sans-serif;
		background: transparent;
		transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
		-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
		border: none;
	}
	/* label #savePwd[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            margin: 0;
    }
	
	label #savePwd[type="checkbox"]:checked:after {
		
	} */

	/* .checkbox label{
		display:flex;
	}
	.checkbox label::before{
		display: inline-block;
		content:'';
		border: 1px solid #5d7a96;
		width: .4rem;
		height: .4rem;
		margin-right: .2rem;
	}
	.checkbox input{
		position: absolute;
		top: 0;
		z-index: 9999;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		cursor: pointer;
		opacity: 0;
	}

	.checkbox input:checked+label::before{
		background:#41d80d;
	} */
	.btn-login{
		width: 2.8rem;
		height: 0.96rem;
		background:#08c261;
		border: none !important;
		border-radius: 5px;
		display: block;
		color: #fff;
		font-size: 0.42rem;
	}
	.btn-logins{
		width: 2.8rem;
		height: 0.96rem;
		background: #e2ecec;;
		border: none !important;
		border-radius: 5px;
		display: block;
		color: #000;
		font-size: 0.42rem;
	}
	.login-indexs{
		width: 100vw;
		position: absolute;
		bottom: 0;
		padding: 1.8rem 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	#left-backCon{
		width: 100vw;
		display: none;
		position: absolute;
		left: 100vw;
		top: 0;
		padding: 0 24px;
		box-sizing: border-box;
	}
	#left-backIcon{
		height: 2rem;
		width: 100%;
		display: flex;
		align-items: center;
	}
	#left-backIcon img{
		width: 0.72rem;
		height: 0.64rem;
	}
	#left-backIcon span{
		flex: 1;
		padding-left: 16px;
		box-sizing: border-box;
		color: #ebcf0b;
		text-align: left;
		font-size: 0.4rem;
	}
	.login-con{
		width: 100vw;
		height: 100vh;
		position: relative;
		background: url("/Public/Home/images/login-back.jpg") no-repeat;
		background-size: cover;
		background-position-x: 50%;
	}
	.login-cons{
		width: 100vw;
		height: 100vh;
		position: relative;
	}
	.call-login{
		font-size: 0.42rem;
		color: #5d7a96;
		font-weight: 450;
	}
</style>
	</head>
	<!-- <style type="text/css">
		body,
		canvas,
		div {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			-khtml-user-select: none;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		body{
			background:url("__PUBLIC__/Home/css/img/index_bg.jpg") no-repeat 0 0;
			background-size:cover;
			padding: 0 10px;
		}
		.facesj{
			display: inline-block;
			background-color: #1fa1dc;
			width: 60px;
		    height: 32px;
		    line-height: 32px;
		    border-radius: 3px;
		    text-align: center;
		    font-size: 14px;
		    margin-top:6px;
		    border: 1px solid #1fa1dc;
		    color: #FFF;
		    margin-left:10px;
		}
		h3{
			color: rgba(210, 188, 37, 0.73);
			font-size:20px;
			font-weight: bold;
		}
	</style> -->
	<body>
		<!-- <div class="middle-box text-center loginscreen  animated fadeInDown">
			<div>
				<div>
					<h1 style="height:100px"></h1>
				</div>
				<h3>登 录</h3>
				<form class="m-t" role="form" method="post" action="{:U('Home/Index/login')}" id="LoginForm">
				<div class="form-group">
					<input type="text" id="username" name="username" class="form-control" placeholder="用户名" required>
				</div>
				<div class="form-group">
					<input type="password" id="password" name="password" class="form-control" placeholder="密码" required>
				</div>
				<button type="submit" class="btn btn-success block full-width m-b">登 录</button>
			</form>
			</div>
		</div> -->
		<!-- <div id="header-icon" class="icon">
			<img src="__PUBLIC__/Home/img/horss.png" alt="">
		</div> -->
		<div class="login-con" id="login-con">
			<div id="left-backCon">
				<div id="left-backIcon">
					<img src="__PUBLIC__/Home/img/backIcon.png" alt="">
					<span></span>
				</div>
			</div>
			
			<div class="success">
					<img src="__PUBLIC__/Home/img/right.png" alt="" class="right">
					<p>login success</p>
			</div>
			<div class="login-indexs" id="login-indexs">
				<button id="loginType" class="btn-login">login</button>
				<button id="registerType" class="btn-logins" onclick="window.location='{:U(\'Index/register\')}'">register</button>
			</div>
			<div class="login" id="login-from">
				<h1 style="width: 100vw;padding: 9% 36px; box-sizing: border-box; color: #000;font-weight: 450;">WeChat/Mobile number login</h1>
				<form class="m-t" role="form" method="post" action="{:U('Home/Index/login')}" id="LoginForm">
					<div class="form-group">
						<!-- <img src="__PUBLIC__/Home/img/phone.png" alt="" class="phone" style="width:0.52rem;height:0.72rem;"> -->
						<span>account number</span>
						<input type="text" id="username" name="username"  class="form-control" placeholder="username(phone login)" required >
					</div>
					<div class="form-group">
						<!-- <img src="__PUBLIC__/Home/img/password.png" alt="" class="password" style="width:0.6rem;height:0.68rem;"> -->
						<span>password</span>
						<input type="password" id="password" name="password" class="form-control" placeholder="password" required>
						<!-- <span class="yzm">获取验证码</span> -->
					</div>
					<div  class="checkbox">
						<input type="checkbox" id="savePwd" checked="checked">
						<label>
							Remember password
						</label>
					</div>
					<button type="submit" class="btn btn-success block full-width m-b" id="btn">log in</button>
					<div class="checkboxs" style="position: fixed; bottom: 18px;">
					    <h5 class="call-login">WeChat login</h5>
						<span style="height: 16px;background: #8a8686;width: 2px;display: block;margin: 0 9px;"></span>
						<div style="z-index: 10000" onclick="window.location='{:U(\'Index/register\')}'">Register an account</div>
					</div>
				</form>
			</div>
	    </div>
		<script src="__PUBLIC__/Admin/js/jquery.min.js?v=2.1.4"></script>
		<!-- <script src="__PUBLIC__/Admin/js/bootstrap.min.js?v=3.3.6"></script> -->
		
		<script src="__PUBLIC__/Common/js/ajaxForm.js"></script>
		<script src="__PUBLIC__/layer/layer.js"></script>
		<script type="text/javascript">

		  $(function(){
			$("#loginType").click(function(){
			  $("#login-con").removeClass("login-con").addClass("login-cons")
			  $("#login-indexs").hide()
			  $("#login-from").show()
			  $("#left-backCon").show()
			  $("#login-from").animate({left:"-=100vw"},560)
			  $("#header-icon").animate({left:"-=100vw"},560)
			  $("#left-backCon").animate({left:"-=100vw"},560)
			})
			$("#left-backCon").click(function(){
				$("#login-con").removeClass("login-cons").addClass("login-con")
                $("#left-backCon").css('left','100vw')
				$("#login-from").css('left','100vw')
				$("#header-icon").css('left','0')
				$("#login-from").show().hide()
				$("#login-indexs").show()
				$("#left-backCon").hide()
			})
			if(localStorage["username"]){
				$('#username').val(localStorage["username"]);
				$('#password').val(localStorage["password"]);
			}
				$('#LoginForm').ajaxForm({
					beforeSubmit: checkForm,
					success: complete, 
					dataType: 'json'
				});
				function checkForm(){
					if( ''== $.trim($('#username').val())){
						layer.alert('账号不能为空', {icon: 5}, function(index){
			 			layer.close(index);
						$('#username').focus(); 
						});
						return false;
					}


					if( '' == $.trim($('#password').val())){
						layer.alert('密码不能为空', {icon: 5}, function(index){
			 			layer.close(index);
						$('#password').focus(); 
						});
						return false;
					}
					
					if($("#savePwd").is(":checked")){
						localStorage["username"]=$('#username').val();
						localStorage["password"]=$('#password').val();
					}else{
						localStorage["username"]="";
						localStorage["password"]="";
					}
				}
				function complete(data){
					if(data.status==1){
						$('.btn').attr('disabled','disabled');
						console.log(data.info)
						$('.success').css('display','block')
				     	setTimeout(function(){
							 $('.success').css('display','none');
							
							 window.location.href=data.url;
						  }, 2000);
						 
						// layer.msg(data.info, function(index){
						// 	console.log(index)
						// 	console.log(data.info)
			 			// 	layer.close(index);
						// 	// window.location.href=data.url;
						// });
					}else{
						layer.msg(data.info);
						$('#password').val('').focus();
						return false;	
					}
				}
			});
		</script>
	</body>

</html>